import QtQuick 2.0

Rectangle {
    id:centerButton
    width: 100
    height: 100
    color: "white"
    state:"normal"
    states: [
        State {
            name: "normal"
        },
        State {
            name: "big"
            PropertyChanges { target: centerButton; width: parent.width/2 }
            PropertyChanges { target: centerButton; height: parent.height/2 }
        }
    ]

    Canvas {
        id: mycanvas

        Component.onCompleted: {
            loadImage('source/animateButtonBackGround.bmp')
            parent.color = "transparent"
        }
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d");
            ctx.strokeStyle=Qt.rgba(0.3, 0.7, 1, 1.0);
            ctx.save()
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.arc(parent.width/2,parent.width/2,parent.width/2,0,Math.PI*2,false);
            ctx.closePath()
            ctx.stroke();

            ctx.clip()
            ctx.drawImage('source/animateButtonBackGround.bmp', 0, 0)
            ctx.stroke()

            ctx.restore()
        }
    }
}
